<template>
    <div class="white-box">
        <div class="table-mb">
            <el-button type="primary" plain :icon="Delete" @click="allDel"
                >批量删除</el-button
            >
            <el-button type="primary" :icon="CirclePlus" @click="addClass"
                >添加</el-button
            >
        </div>

        <el-table
            class="table-mb"
            v-loading="loading"
            :data="arr_data"
            :header-cell-style="{
                background: '#F5F7FA',
                textAlign: 'center',
            }"
            :cell-style="
                ({ column }) => {
                    return {
                        textAlign:
                            column.className === 'operation-nav'
                                ? 'left'
                                : 'center',
                        paddingLeft:
                            column.className === 'operation-nav' ? '25px' : '0',
                    };
                }
            "
            border
            element-loading-background="rgba(255, 255, 255, 0.6)"
            @selection-change="handleAllSelected"
        >
            <el-table-column type="selection" width="55" />
            <el-table-column
                prop="album_id"
                label="分类ID"
                sortable="custom"
            ></el-table-column>
            <el-table-column prop="name" label="分类名称"></el-table-column>
            <el-table-column prop="nums" label="分类下图片数"></el-table-column>
            <!-- <el-table-column label="是否隐藏">
                <template #default="{ row }">
                    <p>{{ row.hidden == 0 ? '显示' : '隐藏' }}</p>
                </template>
</el-table-column> -->
            <el-table-column
                prop="created_at_label"
                label="添加时间"
            ></el-table-column>
            <el-table-column
                label="操作"
                width="200"
                class-name="operation-nav"
                fixed="right"
            >
                <template #default="scope"
                    ><MoreBtn
                        :buttons="[
                            {
                                props: {
                                    onClick: () => clickEdit(scope.row),
                                },
                                text: '编辑',
                            },
                            {
                                props: {
                                    onClick: () => clickDel(scope.row),
                                },
                                text: '删除',
                            },
                        ]"
                    />
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="slot, sizes, prev, pager, next, jumper"
        >
            <span class="color-#606266"
                >共&nbsp;{{
                    totalNums >= 100 * pageSize
                        ? `${100 * pageSize}+`
                        : totalNums
                }}&nbsp;条</span
            >
        </el-pagination>

        <!-- 添加/编辑 -->
        <el-dialog
            v-model="dialogClass"
            :title="classType == 1 ? '添加分类' : '编辑分类'"
            width="540px"
            :append-to-body="true"
            :destroy-on-close="true"
            :close-on-click-modal="false"
            @close="closeAddClass"
        >
            <el-form
                ref="ruleClassRef"
                :model="ruleClassForm"
                :rules="ruleCheckClass"
                label-width="120px"
            >
                <el-form-item label="上级分类" prop="cate_id">
                    <el-select
                        v-model="ruleClassForm.cate_id"
                        placeholder="请选择上级分类"
                        @change="changeclassType"
                        :disabled="classType == 2"
                    >
                        <el-option
                            :label="item.title"
                            :value="item.cate_id"
                            v-for="(item, index) in class_options"
                            :key="index"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="分类名称" prop="name">
                    <el-input
                        v-model.trim="ruleClassForm.name"
                        clearable
                        placeholder="请输入分类名称"
                    />
                </el-form-item>
                <!-- <el-form-item label="隐藏" prop="showClass">
                    <el-switch v-model="ruleClassForm.showClass" inline-prompt :active-value="1" :inactive-value="0"
                        active-text="是" inactive-text="否" />
                </el-form-item> -->
                <el-form-item>
                    <div class="flexs" style="margin-top: 30px">
                        <el-button
                            type="primary"
                            :loading="form_loading"
                            @click="submitClassForm(ruleClassRef)"
                        >
                            {{ classType == 1 ? "确认添加" : "确认修改" }}
                        </el-button>
                        <el-button @click="resetClassForm(ruleClassRef)"
                            >重置</el-button
                        >
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 删除分类 -->
        <el-dialog
            v-model="dialogDelClass"
            title="删除分类"
            width="540px"
            :append-to-body="true"
            :destroy-on-close="true"
        >
            <div class="edit-box">
                <p class="del-tips">
                    删除该文件夹同时会删除其子文件夹，是否继续？
                </p>
                <el-radio-group v-model="del_type">
                    <el-radio label="1">不删除图片</el-radio>
                    <el-radio label="2">同时删除图片</el-radio>
                </el-radio-group>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button
                        type="primary"
                        :loading="btnLoading"
                        @click="delClass"
                        >确认</el-button
                    >
                    <el-button @click="dialogDelClass = false">取消</el-button>
                </span>
            </template>
        </el-dialog>

        <go-back></go-back>
    </div>
</template>

<script setup>
import { inject, ref, onMounted, watch, reactive, onBeforeUnmount } from "vue";
import OneLoad from "@mixins/one-load";
import MoreBtn from "@/components/MoreBtn.vue";
import GoBack from "@components/GoBack.vue";
import { Delete, CirclePlus } from "@element-plus/icons-vue";

const $message = inject("$message");

onMounted(() => {
    getList();
});
//清除
onBeforeUnmount(() => {});

/**
 * minxin列表加载
 */
const {
    page,
    pageSizeNum,
    pageSize,
    loading,
    arr_data,
    totalNums,
    pubParams,
    getdata,
} = OneLoad();
// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1;
    pageSize.value = val;
    pubParams(getList);
});
// 跳转第几页
watch(page, (val) => {
    page.value = val;
    pubParams(getList);
});
function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
    };
    getdata("design/cate", params);
}

/**
 * 添加/编辑
 * @param {Boolean} dialogClass 添加/编辑弹窗状态
 * @param {Boolean} form_loading 提交按钮状态
 * @param {Number} classType 弹窗类型，1是添加，2是编辑
 * @param {Array} ruleClassRef 表单规则
 * @param {Object} ruleClassForm  表单字段
 * @param {Object} ruleCheckClass  表单提示
 * @param {Function} submitClassForm 提交表单
 * @param {Function} addClass 添加分类
 * @param {Function} closeAddClass 关闭弹窗
 */
const dialogClass = ref(false);
const form_loading = ref(false);
const classType = ref(1);
const ruleClassRef = ref(null);
const ruleClassForm = reactive({
    cate_id: 0,
    sub_cate_id: "",
    name: "",
    // showClass: 0, // [0:隐藏,1:显示]
});
const ruleCheckClass = reactive({
    cate_id: [{ required: true, message: "请选择上级分类", trigger: "change" }],
    name: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
});
const submitClassForm = (formEl) => {
    if (!formEl) return;
    formEl.validate((valid, fields) => {
        if (valid) {
            form_loading.value = true;
            let data = {
                title: ruleClassForm.name,
            };
            if (classType.value == 1) {
                data.parent_id = ruleClassForm.cate_id;
            } else {
                data.album_id = ruleClassForm.sub_cate_id;
            }

            let url =
                classType.value == 1 ? "design/addCate" : "design/editCate";
            $axios
                .post(url, data)
                .then((res) => {
                    form_loading.value = false;
                    if (res.data.code == 0) {
                        dialogClass.value = false;
                        pubParams(getList);
                    } else {
                        $message({ message: res.data.msg, type: "error" });
                    }
                })
                .catch((err) => {
                    form_loading.value = false;
                });
        }
    });
};
const resetClassForm = (formEl) => {
    if (!formEl) return;
    formEl.resetFields();
};
const addClass = () => {
    dialogClass.value = true;
    classType.value = 1;
};
const closeAddClass = () => {
    dialogClass.value = false;
    resetClassForm(ruleClassRef.value);
};
const changeclassType = (value) => {
    ruleClassForm.cate_id = value;
};
// 编辑客户
const clickEdit = (row) => {
    dialogClass.value = true;
    setTimeout(() => {
        ruleClassForm.name = row.name;
        ruleClassForm.sub_cate_id = row.album_id;
        classType.value = 2;
    }, 50);
};

/**
 * 删除分类
 * @param {Boolean} dialogDelClass 分类显示
 * @param {Boolean} btnLoading 提交按钮状态
 * @param {Number} del_class 1是单个删除，2是批量删除
 * @param {Number} del_type 1:不删除图片,2:同时删除图片
 * @param {Function} delClass 删除事件
 */
const dialogDelClass = ref(false);
const btnLoading = ref(false);
const del_class = ref("");
const del_type = ref("1");
const ids = ref([]); // 删除多个
const one_id = ref("");
const handleAllSelected = (val) => {
    ids.value = val;
};
// 点击删除单个
const allDel = () => {
    if (ids.value.length == 0) {
        $message({ message: "请选择需要删除的数据", type: "warning" });
        return;
    }
    del_class.value = 2;
    dialogDelClass.value = true;
};
// 点击删除单个
const clickDel = (row) => {
    del_class.value = 1;
    one_id.value = row.album_id;
    dialogDelClass.value = true;
};
const delClass = () => {
    let arrs = [];
    if (del_class.value == 2) {
        for (let i = 0; i < ids.value.length; i++) {
            arrs.push(ids.value[i].album_id);
        }
    }
    let tid = del_class.value == 1 ? one_id.value : arrs;
    postDel(tid);
};
function postDel(id) {
    $axios
        .post("design/delCate", {
            album_id: id,
            type: del_type.value,
        })
        .then((res) => {
            btnLoading.value = false;
            if (res.data.code == 0) {
                dialogDelClass.value = false;
                pubParams(getList);
            } else {
                $message({ message: res.data.msg, type: "error" });
            }
        })
        .catch((err) => {
            btnLoading.value = false;
        });
}

/**
 * 添加时选择分类
 */
const class_options = ref([
    {
        cate_id: 0,
        title: "顶级分类",
    },
]);
</script>

<style lang="less" scoped>
.edit-box {
    padding: @padding-sm @padding-mdl @padding-xl;
}

.del-tips {
    font-size: @font-size-md;
    color: @gray-8;
    margin-bottom: @margin-md;
    font-weight: bold;
}
</style>
